<template>
  <div :class="`my-alert ${type}`">
      <span>
        <slot/>
      </span>
      <div>x:{{x}}</div>
      <div>y:{{y}}</div>
  </div>
</template>

<script>
  export default {
    // props:属性选项,用于自定义组件 声明 属性
    props:["x","y","type"]
  }
</script>

<style lang="scss" scoped>
.my-alert{
  color: white;
  padding: 10px 20px;
  margin: 2px;
  border-radius: 5px;
  &.success{
    background-color: #67c23a;
  }
  &.info{
    background-color: #908388;
  }
  &.warning{
    background-color: #e6a23c;
  }
  &.error{
    background-color: #f56c6c;
  }
}
</style>